<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <div id="app"></div>
        <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
        <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
        <script>
            // const { effect, reactive, ref, toRef } = Vue
            const { effect, reactive, ref } = VueReactivity
            // 将普通过的类型转化成一个对象，这个对象中value 属性指向原来的值
            // 如果是对象类型，value会是一个proxy对象
            let name = ref('well')
            let info = ref({ age: 18 })
            let state = {
                sex: 'femal'
            }
            console.log('name', name)
            console.log('info', info)
            effect(() => {
                app.innerHTML = name.value + info.value.age
            })
            setTimeout(() => {
                name.value = 'liuguowei'
                info.value.age = 80
            }, 1000)
        </script>
    </body>
</html>
